// import React from 'react'
import axios from "axios"
import { useEffect, useState } from "react"
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { cklist, setvlaue } from "../../store/cklist";
function Sx() {
  const columns = [
    {
      title: 'menuName',
      dataIndex: 'menuName'
    },
    {
      title: 'key',
      dataIndex: 'key'
    },
    {
      title: 'createTime',
      dataIndex: 'createTime'
    },

  ]

  const dispatch = useDispatch()

  const [expandedRowKeys, setexpandedRowKeys] = useState<any>()
  const [data, setData] = useState()
  const sxlist = () => {
    axios.post('/api/menuList').then(res => {
      console.log(res);
      setData(res.data.tableList)
      dispatch(setvlaue(res.data.tableList))
    })
  }

  useEffect(() => {
    sxlist()
  }, [])


  const dgxr = (data) => {
  let  dg = []
    data.forEach((item) => {
      dg.push(item.key)
      if (item.children) {
        dg = dg.concat(dgxr(item.children))
      }
    })
    return dg
  }


  const zk = () => {
    if (expandedRowKeys?.length > 0) {
      setexpandedRowKeys([])
    }
    else {
      setexpandedRowKeys(dgxr(data))
    }
  }
  return (
    <div>
      <Button onClick={() => zk()}>全部展开收起</Button>
      <Table columns={columns} dataSource={data}
        expandable={{ expandedRowKeys, childrenColumnName: 'children', onExpandedRowsChange: setexpandedRowKeys }}


      />;
    </div>
  )
}

export default Sx
